<template>
  <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>修改密码</span>
  </div>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
   <el-form-item label="原密码" prop="oldpass">
    <el-input  type="password" v-model.number="ruleForm.oldpass"></el-input>
  </el-form-item>
  
  <el-form-item label="新密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkpass">
    <el-input type="password" v-model="ruleForm.checkpass" autocomplete="off"></el-input>
  </el-form-item>
 
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</el-card>
</template>

<script>

export default {
name:'PasswordModify',
data(){
      var validateoldPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入原密码'));
        } else {
      //  旧密码是否正确 前端不能做 需要发送ajax
          callback();
        }
      };
    
     var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if (!/^[a-zA-Z0-9]{4,16}$/.test(value)) {
       callback(new Error('密码，4到16位（字母，数字）')); 
     } else if(value==this.ruleForm.oldpass){
       callback(new Error('新旧密码不能相同'));
       }else{
            if(this.ruleForm.checkpass)
       {
        //  对表单某个字段进行校验  对确认新密码字段校验
       this.$refs.ruleForm.validateField("checkpass")
         
       }
       callback(); 
       // 成功必须调用callback  否则小图标一直加载
       
       }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          oldpass:'',
          pass: '',
          checkpass: '',
          
        },
        rules: {
              
          oldpass: [
            { required:true,validator: validateoldPass, trigger: 'blur' }
          ],

          pass: [
            { required:true, validator:validatePass, trigger: 'blur' }
          ],
          checkpass: [
            { required:true,validator: validatePass2, trigger: 'blur' }
          ],
       
        }
      }
  },
  methods:{
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }


</script>

<style lang="less" scoped>
.el-input{
width: 197px;
}

</style>